import { addAsk, listApprovalAsk, listApprovalPermissionAccounts } from '@/services/api/api-needs';
import { CheckCircleTwoTone, CommentOutlined, SendOutlined } from '@ant-design/icons';
import {
  DrawerForm,
  ModalForm,
  ProFormInstance,
  ProFormSelect,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, message } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface AddAskProps {
  interviewId: string;
  onRefurbish: () => void;
}

const AddAsk: React.FC<AddAskProps> = ({ interviewId, onRefurbish }) => {
  const access = useAccess();
  const { initialState, setInitialState } = useModel('@@initialState');

  const formRef = useRef<ProFormInstance>();

  const [openAddActive, setOpenAddActive] = useState<boolean>();

  const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

  /**
   * 推送单位数据
   */
  const [accounts, setAccountsState] = useState<NeedsData.ApprovalPermissionAccount[]>();

  /**
   * 加载 审批人
   */
  const loadListApprovalPermissionAccounts = async () => {
    try {
      const response = await listApprovalPermissionAccounts();
      if (response.code === 0) {
        setAccountsState(response.data);
      }
    } catch (error) {}
  };


  return (
    <DrawerForm
      key="drawer_form_add_ask"
      title="请示"
      drawerProps={{
        destroyOnClose: true,
        width: 800,
        maskClosable: false,
      }}
      formRef={formRef}
      trigger={
        <Button
          key="button_add_ask"
          icon={<CommentOutlined />}
          type="primary"
          style={{
            background: '#1677FF',
          }}
        >
          请示
        </Button>
      }
      initialValues={{
        initiateOrganization: initialState?.currentUser?.organizationName,
      }}
      open={openAddActive}
      onOpenChange={(visible) => {
        setOpenAddActive(visible);
        if (visible) {
          loadListApprovalPermissionAccounts();
        } else {
        }
      }}
      layout="horizontal"
      submitter={{
        render: (props, defaultDoms) => {
          return [
            <Button onClick={() => setOpenAddActive(false)}>取消</Button>,
            <Button
              key="button_add_submit"
              icon={<SendOutlined />}
              type="primary"
              style={{
                background: '#87d068',
              }}
              onClick={() => {
                setModalFormOpenState(true);
              }}
            >
              提交
            </Button>,
            <ModalForm
              key={'modal_form_add_submit'}
              title={
                <>
                  <CheckCircleTwoTone
                    style={{
                      marginRight: 8,
                    }}
                    twoToneColor="#87d068"
                  />
                  确认提交
                </>
              }
              autoFocusFirstInput
              modalProps={{
                width: 400,
                destroyOnClose: true,
              }}
              open={modalFormOpen}
              onOpenChange={setModalFormOpenState}
              submitTimeout={2000}
              submitter={{
                submitButtonProps: {
                  type: 'primary',
                  style: { background: '#87d068' },
                },
              }}
              onFinish={async () => {
                const values = formRef.current?.getFieldsValue();

                console.log('====', values);

                const response = await addAsk({
                  ...values,
                  interviewId: interviewId,
                });

                if (response.code === 0) {
                  message.success('提交成功');
                  setOpenAddActive(false);
                  onRefurbish();
                  return true;
                } else {
                  return false;
                }
              }}
            />,
          ];
        },
      }}
    >
      <ProFormSelect
        width="xl"
        label="审批人"
        name="approvalCombineIds"
        placeholder="选择媒体"
        required={true}
        fieldProps={{
          options: accounts,
          mode: 'multiple',
          removeIcon: true,
          allowClear: true,
          maxTagCount: 'responsive',
        }}
      />

      <ProFormTextArea
        width="xl"
        name="askContent"
        label="请示内容"
        required={true}
        fieldProps={{
          allowClear: true,
          maxLength: 600,
        }}
      />
    </DrawerForm>
  );
};
export default AddAsk;
